<template>
    <el-row>
        <el-col :span="12">
            <!-- 放图片 -->
            <img :src="require('../assets/' + book.imgsrc)" alt="" style="width: 65%;">
        </el-col>

        <el-col :span="12">
            <el-form label-width="80px">

                <el-form-item label="旅游景点">
                    <span>{{ book.name }}</span>
                </el-form-item>

                <el-form-item label="旅游社">
                    <span>{{ book.author }}</span>
                </el-form-item>

                <el-form-item label="预期价格">
                    <span>￥{{ book.price }}</span>
                </el-form-item>

                <el-form-item label="剩余票数">
                    <span>{{ book.storecount }}</span>
                </el-form-item>

                <el-form-item label="购买量">
                    <el-input-number v-model="buyNum" controls-position="right" :min="1" :max="10"></el-input-number>
                </el-form-item>

                <el-button @click="buyNow">立即购买</el-button>
                <el-button type="primary" @click="addCart">添加购物车</el-button>

            </el-form>
        </el-col>

        <!-- 弹窗 -->
        <el-dialog title="付款信息" :visible.sync="dialogVisible" width="50%">
            <div style="text-align: center; margin-bottom: 20px;">
                <!-- 放二维码图片，调整大小和边距使图片占据更大的区域 -->
                <img :src="require('../assets/code.png')" alt="二维码"
                    style="width: 100%; max-width: 300px; margin-bottom: 20px; border-radius: 8px;">
            </div>
            <el-form label-width="100px">
                <el-form-item label="收货人">
                    <el-input v-model="receiver" placeholder="请输入收货人" clearable></el-input>
                </el-form-item>
                <el-form-item label="收货地址">
                    <el-input v-model="address" placeholder="请输入收货地址" clearable></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="phone" placeholder="请输入联系方式" clearable></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button plain type="success" icon="el-icon-check" @click="open2">(*╹▽╹*)</el-button>
            </div>
        </el-dialog>
    </el-row>
</template>

<script>
export default {
    data() {
        return {
            id: '',
            book: {},
            buyNum: 1,
            dialogVisible: false, // 控制弹窗的显示与隐藏
            receiver: '', // 收货人（示例数据，可动态设置）
            address: '', // 收货地址
            phone: '' // 联系方式
        };
    },
    methods: {
        queryDetail() {
            //根据数据Id查询书籍详情
            let jwt = localStorage.getItem("authorization");
            this.$axios.get('/api/market/queryById/' + this.id, { headers: { 'authorization': jwt } })
                .then(response => {
                    if (response.data.code == 200) {
                        this.book = response.data.data;
                    }
                    if (response.data.code == 2001) {
                        this.$router.push("/login");
                    }
                });
        },
        addCart() {
            //用户添加购物车
            let param = {};
            param.bookId = this.id;
            param.buyNum = this.buyNum;
            console.log(param);
            this.$axios.post('/api/order/addCart', param, {
                headers: {
                    'Content-Type': 'application/json',
                }
            })
                .then(response => {
                    if (response.data.code == 200) {
                        this.$message({
                            message: '添加成功 ٩(๑>◡<๑)۶ ',
                            type: 'success'
                        });
                    }
                });
        },
        buyNow() {
            // 打开弹窗
            this.dialogVisible = true;
            this.$notify({
                title: '提示',
                message: '请扫描二维码后付款，未扫描视为支付失败',
                type: 'warning',
                duration: 0
            });
        },
        open2() {
            this.dialogVisible = false;
        }
    },
    created() {
        //获取到路由的参数
        this.id = this.$route.query.bookId;
        this.queryDetail();
    }
};
</script>

<style></style>
